<template>
  <div class="out-div">
    <el-row class="table-row">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="a" label="区域" />
        <el-table-column prop="b" label="区块" />
        <!-- c 合并 -->
        <el-table-column prop="c" label="油田" />
        <el-table-column prop="d" label="井名" />
        <!-- e 合并 -->
        <el-table-column prop="e" label="井型" />
        <el-table-column prop="f" label="本层套管尺寸in" />
        <el-table-column prop="g" label="作业类型" />
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { a: '1a', b: '1b', c: '1-1', d: 111, e: '1-1-1', f: 222, g: 333 },
        { a: '1a', b: '1b', c: '1-1', d: 112, e: '1-1-1', f: 223, g: 334 },
        { a: '1a', b: '1b', c: '1-1', d: 113, e: '1-1-2', f: 224, g: 335 },
      ],
      spanArr1: [],
      spanArr2: [],
    }
  },
  mounted() {
    this.getSpanArr()
  },
  methods: {
    getSpanArr() {
      this.spanArr1 = []
      this.spanArr1.push(1)
      let pos1 = 0
      this.spanArr2 = []
      this.spanArr2.push(1)
      let pos2 = 0
      for (let i = 1; i < this.tableData.length; i++) {
        if (this.tableData[i].c === this.tableData[i - 1].c) {
          this.spanArr1[pos1]++
          this.spanArr1[i] = 0

          if (this.tableData[i].e === this.tableData[i - 1].e) {
            this.spanArr2[pos2]++
            this.spanArr2[i] = 0
          } else {
            this.spanArr2[i] = 1
            pos2 = i
          }
        } else {
          this.spanArr1[i] = 1
          pos1 = i
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      console.log(this.spanArr2)
      console.log(this.spanArr1)
      if (columnIndex in [0, 1, 2, 3, 4]) {
        if (columnIndex in [0, 1, 2]) {
          return {
            rowspan: this.spanArr1[rowIndex],
            colspan: this.spanArr1[rowIndex] > 0 ? 1 : 0,
          }
        } else {
          return {
            rowspan: this.spanArr2[rowIndex],
            colspan: this.spanArr2[rowIndex] > 0 ? 1 : 0,
          }
        }
      }
    },
  },
}
</script>

<style scoped>
.out-div {
  margin: 0px;
}
/* .select-row {
} */
.el-divider--horizontal {
  margin: -10px 0 10px 0;
}
.select-drawer {
  padding: 10px;
}
</style>
